<template>
  <div class="authority">
    <div style="margin: 20px">
      <el-button type="primary" @click="addAuthority(123560562)">添加权限</el-button>
    </div>
    <el-table class="table" :data="tableData" row-key="id" border default-expand-all
      :header-cell-style="{ background: '#f4f6f8', color: '#909399' }">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="name" label="标识" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button size="small" text type="primary" @click="addAuthority(scope.row)"
            v-if="scope.row.type == 1">添加</el-button>
          <el-button size="small" text type="primary" @click="editAuthority(scope.row)">编辑</el-button>
          <el-button size="small" text type="primary" @click="deleteAuthority(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加 -->
  <popUp ref="addPopUpRef" :title="popId == 0 ? '添加权限' : '编辑权限'" width="600" :xiao="AddXiao" :confirm="confirmAdd">
    <template #cont>
      <el-form ref="AddFormRef" :rules="rules" :model="AddForm" label-width="80px" style="margin: 0 30px;">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="AddForm.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="AddForm.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="AddForm.description" prop="name" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch v-model="AddForm.enVisible" inactive-value="0" active-value="1" />
        </el-form-item>
      </el-form>
    </template>
  </popUp>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getPermissionList, updatePermission, getPermissionDetail, addPermission, deletePermission } from "@/api/authorityApi/authorityApi.js"
import { transListToTreeData, ElMCloseBox, ElMOpen } from "@/utils/fn.js"
import popUp from "@/components/popUp.vue"
let addPopUpRef = ref()
let AddFormRef = ref()
let popId = ref(0) //0 表示添加 1 表示修改 //2表示添加子节点
let rules = ref({
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入权限标识', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请输入权限描述', trigger: 'blur' },
  ],
})

// 获取数据
let tableData = ref([])
let getData = () => {
  getPermissionList().then(res => {
    tableData.value = transListToTreeData(res.data, 0)
  })
}
getData()
// 添加
let AddForm = ref({
  name: "",//名字
  code: "",//权限标识
  description: "",//描述
  type: "1",//类型 该类型 不需要显示 因为点击添加的时候已经知道类型
  pid: "0",//因为做的是树 需要知道添加到哪个节点下了
  enVisible: "0"//开启
})
let addAuthority = (row) => {
  if (row == 123560562) {
    popId.value = 0
  } else {
    popId.value = 2
    AddForm.value.pid = row.id
    AddForm.value.type = "2"
  }
  addPopUpRef.value.open()
}
// 添加确定
let confirmAdd = async() => {
 await AddFormRef.value.validate()
  if (popId.value == 0) {
    addPermission(AddForm.value).then(res => {
      ElMOpen("添加成功", "success")
      getData()
    })
  } else if (popId.value == 1) {
    updatePermission(AddForm.value.id, AddForm.value).then(res => {
      getData()
      ElMOpen("编辑成功", "success")
    })
  } else if (popId.value == 2) {
    addPermission(AddForm.value).then(res => {
      ElMOpen("添加成功", "success")
      getData()
    })
  }
  getData()
  AddForm.value = {
    name: "",//名字
    code: "",//权限标识
    description: "",//描述
    type: "0",//类型 该类型 不需要显示 因为点击添加的时候已经知道类型
    pid: "0",//因为做的是树 需要知道添加到哪个节点下了
    enVisible: "0"//开启
  }
  addPopUpRef.value.close()
}
// 添加取消
let AddXiao = () => {
  addPopUpRef.value.close()
  AddForm.value = {
    name: "",//名字
    code: "",//权限标识
    description: "",//描述
    type: "0",//类型 该类型 不需要显示 因为点击添加的时候已经知道类型
    pid: "0",//因为做的是树 需要知道添加到哪个节点下了
    enVisible: "0"//开启
  }
}
// 修改
let editAuthority = (row: any) => {
  popId.value = 1
  getPermissionDetail(row.id).then(res => {
    console.log(res);
    AddForm.value = res.data
  })
  addPopUpRef.value.open()
}
// 删除
let deleteAuthority = (id: number) => {
  ElMCloseBox("确定要删除该数据吗", "", "", () => {
    deletePermission(id).then(res => {
      ElMOpen("删除成功", "success")
      getData()
    })
  })
}



</script>

<style scoped>
.authority {
  height: calc(100vh - 80px);
  background-color: #fff;
  overflow: hidden;
}

.table {
  margin: 20px;
  width: 100%;
  box-sizing: border-box
}
</style>